<template>
  <div class="app-container home">
    <div class="welcome">
      <div class="welcome_title">
        <img src="../assets/images/logos.png" width="50px" height="50px" alt="猴卫士欢迎您！">
        <div>猴卫士欢迎您!</div>
      </div>
      <div>时间</div>
    </div>
    <!--头部       -->
    <div class="header bgc">
       <div class="header_box">
           <div>
             <span>回收订单</span>
             <span class="interval">0</span>
           </div>
       </div>
      <div class="header_box">
        <div>
          <span>回收订单</span>
          <span class="interval">0</span>
        </div>
      </div>
      <div class="header_box">
        <div>
          <span>回收订单</span>
          <span class="interval">0</span>
        </div>
      </div>
      <div class="header_box">
          <div>
            <span>回收订单</span>
            <span class="interval">0</span>
          </div>
       </div>
    </div>
    <!--  中间内容-->
    <div class="content bgc">
      <div class="content_left">
        <div>本周回收订单数量</div>
        <div>
          <div class="echart" id="lineDemo1" ref="chart1"></div>
        </div>
      </div>
      <div class="content_right">
        <div style="margin-bottom: 20px;">活动各项支出占比</div>
        <div>
          <div class="echart" id="lineDemo2" ref="chart2"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "Index",
  data() {
    return {
      chart1:null,
      option1 :{
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      },
      chart2:null,
      option2 :{
        title: {
          text: 'Referer of a Website',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: 'Search Engine' },
              { value: 735, name: 'Direct' },
              { value: 580, name: 'Email' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    };
  },
  mounted(){
    this.renderChart();
  },
  methods: {
    renderChart(){
      this.chart1 = echarts.init(document.getElementById("lineDemo1"));
      console.log(document.getElementById("lineDemo1"));
      console.log(this.chart1);
       this.chart1.setOption(this.option1);

      this.chart2=echarts.init(document.getElementById("lineDemo2"));
      this.chart2.setOption(this.option2)
    },
  }
};
</script>

<style scoped lang="scss">
.app-container{
  padding: 20px;
  background-color: #f8f8f8;
}
.bgc{
  margin-bottom: 10px;
  background-color: #fff;
}

.welcome{
  padding: 15px ;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  margin-bottom: 10px;
}
.welcome_title{
  display: flex;
  align-items: center;
}
.welcome_title img{
  margin-right: 5px;
}
.welcome_title div{
  font-size: 18px;
  font-weight: 700;
}

.header{
  padding: 15px;
  display: flex;
  justify-content: space-between ;

}
.header_box{
  width: 20%;
  text-align: center;
  height: 80px;
  line-height: 80px;
  border: solid 1px #eee;
}
.interval{
  margin-left: 10px;
}

.content{
  padding: 15px;
  display: flex;
}
.content_left{
  flex: 1;
}
.content_right{
  flex:1;
}
.echart{
  width: 500px;
  height: 400px;
}
</style>

